import {
    DesktopOutlined,
    FileOutlined,
    PieChartOutlined,
    TeamOutlined,
    UserOutlined,
} from '@ant-design/icons';
import { Children, useState } from 'react';
import type { MenuProps } from 'antd';
import { Menu } from 'antd';
import { useNavigate, useLocation } from 'react-router-dom';


type MenuItem = Required<MenuProps>['items'][number];

const items: MenuItem[] = [
    {
        label: '栏目1',
        key: '/page1',
        icon: <PieChartOutlined />,
    },
    {
        label: '栏目2',
        key: '/page2',
        icon: <DesktopOutlined />,
    },
    {
        label: '栏目3',
        key: 'page3',
        icon: <UserOutlined />,
        children: [
            {
                label: '栏目301',
                key: '/page3/page301',
            },
            {
                label: '栏目302',
                key: '/page3/page302',
            },
            {
                label: '栏目303',
                key: '/page3/page303',
            }
        ]
    },
    {
        label: '栏目4',
        key: 'page4',
        icon: <TeamOutlined />,
        children: [
            {
                label: '栏目401',
                key: '/page4/page401',
            },
            {
                label: '栏目402',
                key: '/page4/page402',
            }
        ]
    },
    {
        label: '栏目5',
        key: '/page5',
        icon: <FileOutlined />,
    }
]

const Comp: React.FC = () => {
    const navigateTo = useNavigate()
    const currentRoute = useLocation();
    //这里会打印两次  原因:react严格模式
    // console.log(currentRoute.pathname);

    //点击跳转到对应路由 
    const menuClick = (e: { key: string }) => {
        // console.log(e.key);
        navigateTo(e.key)
    }


    //配置初始展开项的代码   原因 ：选中侧边栏目录菜单项下的页面刷新后  侧边栏会自动关闭 -->实现：要刷新页面，已选定的页面的目录菜单项应自动打开
    //实现方式： 将currentRoute.pathname（当前选中路径名）和items数组中的每一项children中的key值做对比   是一样的就赋值给firstOpenKey   然后设置和展开侧边栏目录菜单的函数调用firstOpenKey变量

    let firstOpenKey = '';
    function findKey(obj:{key:string}) {
        return obj.key === currentRoute.pathname;
    }

    for (let i = 0; i < items.length; i++) {
        if(items[i]!['children'] && items[i]!['children'].length>0 && items[i]!['children'].find(findKey)){
            firstOpenKey = items[i]!.key as string;
            break;
        }
    }

    //设置展开哪个侧边栏目录菜单
    //定义变量---openKeys，修改变量(openKeys)---setOpenKeys
    const [openKeys, setOpenKeys] = useState([firstOpenKey]);
    console.log(openKeys);


    //展开和收起侧边栏目录菜单的时候会调用该函数
    const handleOpenChange = (keys: string[]) => {
        //把最后点击的目录菜单展开，因为只要求一项展开
        setOpenKeys([keys[keys.length - 1]])
        //keys是一个数组  记录了当前展开的菜单
        // console.log(keys);

    }


    return (
        <Menu
            theme="dark"
            //表示选择的样式在哪个选项 
            defaultSelectedKeys={[currentRoute.pathname]}
            mode="inline"
            //菜单项的事件
            items={items}
            //菜单点击事件
            onClick={menuClick}
            //菜单展开和收起事件
            onOpenChange={handleOpenChange}
            //当前菜单展开项的key数组
            openKeys={openKeys}
        />
    )
};

export default Comp;
